<html>
<head>
    <title>角色模块</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../css/oksub.css">
    <script type="text/javascript" src="/res/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/ok-admin/js/permissionSetting.js"></script>
    <style type="text/css">
        .demoTable{
            position:absolute;
            left:470px;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>

<div>
    <div class="ok-body">
        <!--模糊搜索区域-->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 ok-search">
                <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
                <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
                <input class="layui-input" placeholder="请输入角色名" autocomplete="off" name="roleName">
                <button class="layui-btn" lay-submit="" lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </form>
        </div>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            {{# if(authorization("role:add")){ }}
            <div class="layui-inline" lay-event="Increasedata"><i class="layui-icon layui-icon-add-1"></i></div>
            {{# } }}
            {{# if(authorization("role:batchDelete")){ }}
            <div class="layui-inline" lay-event="BatchRemove"><i class="layui-icon layui-icon-delete"></i></div>
            {{# } }}
        </div>
    </script>
    <script type="text/html" id="audit">
        {{# if(authorization("role:edit")){ }}
            {{# if(d.roleRank1==null){ }}
                 <a lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
            {{# } else { }}
                <a class="layui-btn layui-btn-disabled layui-btn-xs" ><i class="layui-icon">&#xe642;</i></a>
            {{# } }}
        {{# } }}
        {{# if(authorization("role:delete")){ }}
            <a lay-event="del"><i class="layui-icon">&#xe640;</i></a>
        {{# } }}
    </script>


    <script src="../../../res/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        var openindex = null;
        var table = null;
        var laydate = null;
        layui.use(['table','laydate'] ,function(){
            table = layui.table,
                laydate = layui.laydate;
            let form = layui.form;

            let roleTable = table.render({
                elem: '#test'
                ,url:'/perRole/showListRole'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,height: 'full-200', cellMinWidth: 80 //最大化适应
                ,title: '用户数据表'
                ,height:600
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'roleId', title:'序号', width:60, type:'numbers',unresize: true, sort: 'true'}
                    ,{field:'roleName', title:'角色名称', width:200,align:'center'}
                    ,{field:'roleRemark', title:'角色描述', width:200,align:'center'}
                    ,{field:'whetherValid', title:'是否有效', width:200,align:'center',templet:function (d) {
                            if(d.whetherValid == 1){
                                return `<a class="layui-btn layui-btn-xs layui-btn-normal">已启用</a>`;
                            }else if(d.whetherValid == 2){
                                return  '<a class="layui-btn layui-btn-xs layui-btn-danger">已停用</a>';
                            }
                        }}
                    ,{field:'roleTime', title:'操作时间',align:'center', sort: 'true'}
                    ,{field:'createPerson', title:'操作人',align:'center'}
                    ,{fixed: 'right', title:'操作',width:160,align:'center',templet:'#audit'}
                ]]
                ,page: true
                ,done: function (res, curr, count) { //无数据返回上一页
                    if (curr > 1 && res.data.length === 0) {
                        curr = curr - 1;
                        table.reload('test', {
                            page: {
                                curr: curr
                            },
                            where: {
                            },
                        });
                    }
                }
            });
            //日期时间选择器
            laydate.render({
                elem: "#startTime",
                type: "datetime"});
            laydate.render({elem: "#endTime", type: "datetime"});

            //查询条件
            form.on("submit(search)", function (data) {
                console.info(data)
                roleTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                console.log("0000")
                return false;
            });

            //监听行单击事件（双击事件为：rowDouble）
            $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
                var index = $(this).attr('data-index');
                var tableBox = $(this).parents('.layui-table-box');
                //存在固定列
                if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                    tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
                } else {
                    tableDiv = tableBox.find(".layui-table-body.layui-table-main");
                }
                var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length>0) {
                    checkCell.click();
                }
                //选中背景色
                $(this).siblings().css("background-color", "#FFFFFF");
                $(this).css("background-color", "#F2F2F2");
            });

            $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
                e.stopPropagation();
            })

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        alert(data);
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                    case 'BatchRemove':
                        layer.confirm('真的删除行么', function(index){
                            var data = checkStatus.data;
                            console.info(data);
                            if(data==null || data==""){
                                layer.msg('未选择数据');
                                return;
                            }
                            //将对象数组打包成对象id数组
                            var RoleIdArr = [];
                            $.each(data,function(index,item){
                                RoleIdArr.push(item.roleId);
                            });
                            var formData = new FormData();
                            formData.append("RoleIdAll", RoleIdArr);
                            $.ajax({
                                url:"/perRole/deleteAllRole",
                                data:formData,
                                type:"post",
                                dataType:'json',
                                processData: false,
                                contentType: false,
                                success:function (ojj) {
                                    if(ojj.status==20){
                                        tishi(ojj.message);
                                    }else{
                                        tishi(ojj.message);
                                    }
                                },
                                error:function () {

                                }
                            })
                            layer.close(index);
                        });
                        break;
                    case 'Increasedata':
                        openindex = layer.open({
                            type: 2,
                             //skin: 'layui-layer-rim', //加上边框
                            area: ['85%', '65%'], //宽高
                            title:'角色维护',
                            anim:1,
                            offset:"auto",
                            skin: 'layui-layer-molv',//样式
                            shade: [0.8, '#393D49'] ,//显示遮罩
                            // shift: 1, //0-6的动画形式，-1不开启
                            resize: false,//不允许拉伸
                            shadeClose:true,//点击也能遮罩层关闭
                            //maxmin: true, //开启最大化最小化按钮
                            content: 'from.html',
                        });
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });



            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                console.log(obj);
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        console.info(data);
                        $.post("/perRole/deleteRole",{roleId : data.roleId},function(objs){
                            if(objs.status==20){
                                tishi(objs.message);
                            }else{
                                tishi(objs.message);
                            }
                        },"json");
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    console.info(data);
                    var id =  data.roleId;
                    openindex = layer.open({
                        type: 2,
                        // skin: 'layui-layer-rim', //加上边框
                        area: ['85%', '65%'], //宽高
                        title:'角色维护',
                        anim:1,
                        skin: 'layui-layer-molv',//样式
                        shade: [0.8, '#393D49'] ,//显示遮罩
                        //shift: 1, //0-6的动画形式，-1不开启
                        shadeClose:true,//点击也能遮罩层关闭
                        //maxmin: true, //开启最大化最小化按钮
                        content: 'from.html?id='+id,
                    });
                }
            });
        });
        /**
         * 提示
         */
        function tishi(msg) {
            layer.msg(msg,{time:1000,icon:1},function(){
                table.reload("test");
                //window.location.reload(true);
            });
        }

        /**
         * 关闭弹出层
         */
        function closeOpen(msg){
            layer.close(openindex);
            layer.msg(msg,{time:1000,icon:1},function(){
                table.reload("test");
                //window.location.reload(true);
            });
        }

        /**
         * 错误提示 关闭弹出层
         */
        function errorCloseOpen(msg){
            layer.close(openindex);
            layer.msg(msg,{time:2000,icon:2},function(){
                table.reload("test");
                //window.location.reload(true);
            });
        }

        //图片放大
        function showBig(obj){
            $("#imgDiv").fadeToggle(1000);//渐隐
            $("#imgDiv_img").prop("src",obj.src);
        }


    </script>

    <div id="imgDiv" style="display:none; position:absolute;left:55%;top:10%">
        <img src="" id="imgDiv_img" width="100%" heigth="100%" onclick="showBig(this)"/>
    </div>
</div>
</body>
</html>
